<template>
    <el-date-picker
        @change="handleChangeValue"
        v-model="currentDateRange"
        :type="type"
        :format="format"
        :valueFormat="valueFormat"
        :rangeSeparator="rangeSeparator"
        :startPlaceholder="startPlaceholder"
        :showTrigger="true"
        :endPlaceholder="endPlaceholder" >
    </el-date-picker>
</template>

<script>
import {isNullOrUndefined, strIsEmpty} from "../../core";

export default {
    name: "SksDateYmdRange",
    props:{
        startTimePropName:[String],
        endTimePropName:[String],
        formData:[Object],
        //
        type:{
            type:String,
            default: 'daterange'
        },

        format:[String],
        /**
         * 格式化类型
         * yyyy-MM-dd HH:mm:ss: 如果为该类型,而且type='daterange'最终会格式化成 00:00:00-23:59:59)
         */
        valueFormat:{
            type: String,
            default: 'yyyy-MM-dd HH:mm:ss',
        },
        rangeSeparator:{
            type: String,
            default: '至',
        },
        startPlaceholder:{
            type: String,
            default: '开始日期',
        },
        endPlaceholder:{
            type: String,
            default: '结束日期',
        },
    },
    data(){
        return {
            //任何一个为空就不会显示,而且元素不能为 null 或 undefined
            currentDateRange:[],
        }
    },
    watch:{
        formData:{
            handler(val){
                this.initCurrent()
            },
            immediate: true,
            deep: true,
        },
    },
    methods:{
        initCurrent(){
            if (isNullOrUndefined(this.formData)||isNullOrUndefined(this.startTimePropName)||isNullOrUndefined(this.endTimePropName)) {
                this.currentDateRange=[]
                return;
            }
            let startTime = this.formData[this.startTimePropName];
            let endTime = this.formData[this.endTimePropName];
            console.log('startTime',startTime)
            console.log('endTime',endTime)
            if(strIsEmpty(startTime)||strIsEmpty(endTime)){
                this.currentDateRange=[]
                return;
            }
            this.currentDateRange=[startTime,endTime]
        },
        handleChangeValue(val){
            if(isNullOrUndefined(this.formData)||isNullOrUndefined(this.startTimePropName)||isNullOrUndefined(this.endTimePropName)){
                this.formData[this.endTimePropName]=undefined
                this.formData[this.startTimePropName]=undefined
                return;
            }
            if (this.currentDateRange.length!=2) {
                this.formData[this.endTimePropName]=undefined
                this.formData[this.startTimePropName]=undefined
                return
            }
            console.log("this.currentDateRange",this.currentDateRange)
            // console.log("val=",val)
            //valueFormat  默认 yyyy-MM-dd HH:mm:ss
            let startTime=this.currentDateRange[0]
            let endTime=this.currentDateRange[1]
            // startTime=formatDateToDateTimeYmd00000(this.currentDateRange[0])
            // endTime=formatDateToDateTimeYmd00000(this.currentDateRange[1])
            console.log('startTime',startTime)
            console.log('endTime',endTime)
            this.formData[this.startTimePropName]=startTime
            this.formData[this.endTimePropName]=endTime
            this.$emit('clearValidate',this.startTimePropName)
            this.$emit('clearValidate',this.endTimePropName)
        },
    },
}
</script>

<style scoped>

</style>

<!--
                <SksDateRange @clearValidate="sksForm.clearFormValidate"
                    :formData="form"
                              startTimePropName="actualStartTime"
                              endTimePropName="actualEndTime"
                >
                </SksDateRange>
-->
